<template>
    <div class="mainbox">
		<div class="headerbut">
			<div class="navbut">
				<div class="navitem" v-for="(item,index) in typelist" :key="item.id" @click="changetype(item)"
				:style="{'background':item.id==currone?'#409EFF':'','color':item.id==currone?'#FFF':''}">
					{{item.title}}
				</div>
			</div>
			<div class="buttonbox">
				<el-button v-if="currone==1" type="primary" @click="toexamine()">审核</el-button>
				<el-button v-if="currone==2" type="primary" @click="toaccounts()">转账</el-button>
				<el-button type="primary" >导出</el-button>
				<!-- <el-button
				    v-for="(item, index) in buttons"
				    :key="index"
				    :type="item.path | formatType"
				    :icon="item.icon"
				    :disabled="selection.length==0"
				    @click="tapButton(item)"
				    >{{ item.title }}</el-button
				> -->
			</div>
			<div class="searchbox">
				<el-input placeholder="请输入订单号、用户名、商户名称模糊查询" style="width: 320px;margin-right: 10px;" v-model="searchParamCp.keyword"
					size="mini" clearable>
				</el-input>
				<!-- <el-input placeholder="请输入订单编号" style="width: 200px;margin-right: 10px;" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input> -->
				<!-- <el-input placeholder="最低金额" type="number" style="width: 130px;margin-right: 10px;" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input>
				<div>-</div> -->
				<!-- <el-input placeholder="最高金额" type="number" style="width: 130px;margin-right: 10px;margin-left: 10px" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input> -->
				<div style="width: 360px;">
					<el-date-picker
					size="mini"
					     v-model="searchParamCp.addtime"
					     type="daterange"
					     range-separator="至"
					     start-placeholder="开始日期"
					     end-placeholder="结束日期">
					   </el-date-picker>
				</div>
				<!-- 结算状态1待审核 2待支付 3已支付 空为全部 -->
				<el-select v-model="searchParamCp.settle_status" size="mini" placeholder="请选择结算状态"
					style="width: 200px;margin-right: 10px;margin-left: 10px;">
					<el-option v-for="(item,index) in statuslist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				 <el-button style="margin-left: 10px;" type="primary" size="mini" @click="searchs()">搜索</el-button>
				 <el-button size="mini" @click="reset()">重置</el-button>
			</div>
		    
		</div>
       <!-- <div class="main-header">
            <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="selection.length==0"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            >
        </div> -->
		<div class="tablebox">
			<!-- <el-table
			ref="multipleTable"
			:data="goodsTypeData"
			tooltip-effect="dark"
			style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column
			  align="right">
			  <template slot="header" slot-scope="{ row }">
				  <div style="display: flex;justify-content: space-between;">
					  <div>商户名称: </div>
					   <div>商户电话:</div>
					    <div>可结算￥|服务费|订单数:</div>
					    <div>服务费率:%</div>
					     <div>待支付</div>
				  </div>
			  </template>
			</el-table-column>
			</el-table> -->
			<div v-for="(item,index) in goodsTypeData":key="index" >
				<div class="headerbox"  @click="addselection(item)">
					<el-checkbox v-model="item.checked"  @change="addselection(item)"></el-checkbox>
					<div>商户名称: {{item.store_name}}</div>
					<!-- <div>商户电话:{{item.mobile}}</div> -->
					<div>优惠券：可结算￥{{Number(item.settle_coupon_money/100).toFixed(2)}}</div>
					<div>订单：可结算￥{{Number(item.settle_money/100).toFixed(2)}}|服务费{{Number(item.server_money/100).toFixed(2)}}订单数:{{item.order_count}}</div>
					<div>手续费：￥{{Number(item.comm_money/100).toFixed(2)}}</div>
					<div>总结算：{{Number(item.settle_coupon_money/100+item.settle_money/100-item.comm_money/100).toFixed(2)}}</div>
					<div>服务费率:{{item.commission_rate}}</div>
					<!-- //结算状态1待审核 2待支付 3已支付 空为全部 -->
					<!-- <div >{{currone==1?'待审核':currone==2?'待支付':currone==3?'已支付':'全部'}}</div> -->
				</div>
				<el-table
				    ref="table"
				    :data="item.children"
				    height="200px"
				    border
				    header-cell-class-name="main-table-header"
				>
				    <el-table-column
				        prop="order_sn"
				        align="center"
				        label="订单编号"
				    ></el-table-column>
					
				    <el-table-column
				        prop="pay_money"
				        align="center"
				        label="订单金额(元)"
				    ></el-table-column>
					<el-table-column align="center" label="优惠券抵扣" prop="coupon_money" />
					<el-table-column
					    prop="server_money"
					    align="center"
					    label="服务费(元)"
					></el-table-column>
					<el-table-column
					    prop="settle_money"
					    align="center"
					    label="可结算(元)"
					></el-table-column>
					<el-table-column align="center" label="优惠券结算金额" prop="settle_coupon_money" />
					 <el-table-column align="center" label="总结算金额" >
						 <template slot-scope="{row}">
							{{(Number(row.settle_coupon_money)+Number(row.settle_money)).toFixed(2)}}
						 </template>
						</el-table-column>
					<!-- 2微信支付  3优生活支付 4账户余额支付 -->
					<el-table-column align="center" label="支付方式" prop="pay_type">
					    <template slot-scope="{ row }">
							<el-tag v-if="row.pay_type==2">微信支付</el-tag>
							<el-tag type="success" v-if="row.pay_type==3">优生活支付</el-tag>
							<el-tag type="danger" v-if="row.pay_type==4">账户余额支付</el-tag>
					    </template>
					</el-table-column>
					<el-table-column align="center" label="订单日期" prop="addtime">
					    <template slot-scope="{ row }">
							{{getTime(row.addtime)}}
					    </template>
					</el-table-column>
					<el-table-column align="center" label="审核日期" prop="pay_expire_time">
					    <template slot-scope="{ row }">
							{{getTime(row.pay_expire_time)}}
					    </template>
					</el-table-column>
					<el-table-column align="center" label="审核人">
						<template slot-scope="{ row }">
							admin
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination
			v-if="total>0"
			    class="main-pagination"
			    :current-page.sync="page"
			    :page-size="limit"
			    :total="total"
			    @current-change="onPageChange"
			    layout="total,jumper,prev,pager,next"
			></el-pagination>
			<el-dialog
			    :visible.sync="dialogVisible"
			    :title="dialogTitle"
			    append-to-body
			    width="960px"
			    @close="onDialogClose"
			>
			    <component
			        :is="dialogView"
			        @update="getGoodsTypeData"
			        :selection="selection"
			    ></component>
			</el-dialog>
		</div>
       
    </div>
</template>

<script>
import { get, del,post } from "@/assets/js/http.js";

export default {
    name: "view-settlement",
    data() {
        return {
            goodsTypeData: [],
            page: 1,
            limit: 3,
            total: 0,
            selection: [],
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
			info:{},//编辑详情
			id:[],
			typelist:[{id:1,title:'待审核'},{id:2,title:'待支付'},{id:3,title:'已支付'},{id:'',title:'全部订单'}],
			currone:1,//状态索引
			searchinfo:{
				keyword:'',
				addtime:[],
				settle_status:1,
			},
			searchParamCp:{},
			statuslist:[{id:1,label:'待审核'},{id:2,label:'待支付'},{id:3,label:'已支付'}],//结算状态1待审核 2待支付 3已支付 空为全部
        };
    },
    mounted() {
        this.getGoodsTypeData();
    },
    components: {
        Add: () => import("./add.vue"),
        Edit: () => import("./edit.vue")
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    methods: {
		getTime(time) {
			let date = new Date(time * 1000)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			// 时分秒
			let hour = date.getHours()
			let minute = date.getMinutes()
			let second = date.getSeconds()
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
        onPageChange(index) {
            this.page = index;
            this.getGoodsTypeData();
        },
		searchs() {
			this.page = 1
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp
			}
			this.getGoodsTypeData()
		},
		reset() {
			this.page = 1
			this.searchParamCp = {}
			this.searchinfo = {
					keyword:'',
					addtime:[],
					settle_status:'',
				},
				this.getGoodsTypeData()
		},
        async getGoodsTypeData() {
            const data = await get({
                url: "/admin/finance.Settle/beSettleList",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit,
					...this.searchinfo,
					ids:this.selection.map(item=>item=item.id),
					...{
						addtime: this.searchinfo.addtime.length ? this.searchinfo.addtime.join(
							' - ') : ''
					}
                }
            });
            this.goodsTypeData = data.list;
			this.goodsTypeData.forEach(item=>{
				item.checked=false
			})
			console.log(this.goodsTypeData)
            this.total = data.total;
        },
        onAdd() {
            this.dialogTitle = "新增商品分类";
            this.dialogView = "Add";
            this.dialogVisible = true;
        },
        onEdit() {
            this.dialogTitle = "编辑商品分类";
            this.dialogView = "Edit";
            this.dialogVisible = true;
        },
        onDelete() {
            this.$confirm(
                `此操作将永久删除该${this.selection.length}个商品分类, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }
            )
                .then(async () => {
                    let query = "?";
                    for (let i = 0; i < this.selection.length; i++) {
                        const item = this.selection[i];
                        if (i > 0) {
                            query += "&ids[]=" + item.id;
                        } else {
                            query += "ids[]=" + item.id;
                        }
                    }
                    await del({
                        url: "/admin/shop.GoodsCategory/del" + query,
                        successTip: true,
                        loading: true
                    });
                    this.getGoodsTypeData();
                })
                .catch(() => {
                    this.$refs.table.clearSelection();
                });
        },
		//切换状态
		changetype(item){
			this.currone = item.id
			this.selection = []
			this.page = 1
			this.searchParamCp.settle_status = item.id
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp
			}
			 this.getGoodsTypeData();
		},
		addselection(item) {
			if(item.checked==true){
				const c = this.selection.findIndex(sitem => sitem==item)
				this.selection.splice(c,1)
				item.checked=!item.checked
			}else{
				this.selection.push(item);
				item.checked=!item.checked
			}
			console.log(this.selection,'selection')
		    
		},
		//结算审核
		seting(){
			this.$confirm(`此操作将审核该${this.selection.length}个数据, 是否继续?`, '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						let ids = []
						this.selection.forEach(item=>{
							item.children.forEach(s=>{
								ids.push(s.id)
							})
						})
						console.log(ids,'ids')
			          post({
			              url: "/admin/finance.Settle/checkSettle",
			          	data:{
			          		ids:ids
			          	},
			              successTip: true,
			              loading: true
			          }).then(res=>{
						  this.getGoodsTypeData();
						  this.selection = []
						  this.goodsTypeData.forEach(item=>{
						  	item.checked=false
						  })
					  })
			          console.log(123)
			          this.selection = []
			          this.goodsTypeData.forEach(item=>{
			          	item.checked=false
			          })
			         
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消'
			          });          
			        });
		},
        onRowClick(row) {
            // this.$refs.table.toggleRowSelection(row);
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
        tapButton(item) {
            if (item.path === "add") {
                this.onAdd();
            } else if (item.path === "set") {
                this.seting();
            } else if (item.path === "delete") {
                this.onDelete();
            }
        },
		//供应商结算审核
		toexamine(){
			this.$confirm(`此操作将审核该${this.selection.length}个数据, 是否继续?`, '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						let ids = []
												this.selection.forEach(item=>{
													item.children.forEach(s=>{
														ids.push(s.id)
													})
												})
			          post({
			              url: "/admin/finance.Settle/checkSettle",
			          	data:{
			          		ids:ids
			          	},
			              successTip: true,
			              loading: true
			          }).then(res=>{
						  console.log(123)
						  this.getGoodsTypeData();
						  this.selection = []
						  this.goodsTypeData.forEach(item=>{
						  	item.checked=false
						  })
					  })
			          this.selection = []
			          this.goodsTypeData.forEach(item=>{
			          	item.checked=false
			          })
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消'
			          });          
			        });
		},
		//供应商分账
		toaccounts(){
			this.$confirm(`此操作将对该${this.selection.length}个数据分账, 是否继续?`, '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						let ids = []
						this.selection.forEach(item=>{
							item.children.forEach(s=>{
								ids.push(s.id)
							})
						})
						// ids = ids.slice(0,200)
						// console.log(ids.length,'ids.length')
			          post({
			              url: "/admin/finance.Settle/paySettle",
			          	data:{
			          		ids:ids
			          	},
			              successTip: true,
			              loading: true
			          }).then(res=>{
						  console.log(123)
						  this.getGoodsTypeData();
						  this.selection = []
						  this.goodsTypeData.forEach(item=>{
						  	item.checked=false
						  })
					  })
			         this.selection = []
			         this.goodsTypeData.forEach(item=>{
			         	item.checked=false
			         })
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消'
			          });          
			        });
		},
    }
};
</script>
<style lang="scss" scoped>
	.mainbox{
		box-sizing: border-box;
		    /* display: flex; */
		    flex-direction: column;
		    align-items: stretch;
		    align-content: stretch;
		    flex-wrap: wrap;
		    padding: 0 1.5rem;
		    width: 100%;
		    height: 100%;
		    overflow: hidden;
	}
	.headerbut{
		.navbut{
			display: flex;
			width: 900px;
			border: solid 1px #EBEEF5;
			margin: 10px auto 0 auto;
			.navitem{
				width:25%;
				text-align:center;
				height: 40px;
				line-height: 40px;
				background:#FFF;
				color: #222222;
			}
		}
		.buttonbox{
			display: flex;
			align-items: center;
		}
		.searchbox{
			display: flex;
			align-items: center;
			margin-top: 10px;
		}
	}
	.tablebox{
		/* box-sizing: border-box; */
		margin-top: 15px;
		overflow: hidden;
		padding-right: 1px;
		padding-bottom: 1px;
		height: 82%;
		// background-color: #222222;
		/* box-sizing: border-box;
		margin-top: 15px;
		overflow: hidden; */
		/* padding-right: 1px;
		padding-bottom: 1px; */
	}
	.headerbox{
		display:flex;
		align-items: center;
		justify-content: space-around;
		height: 50px;
		font-size: 16px;
		border-top: solid 1px  #EBEEF5;
		border-left: solid 1px  #EBEEF5;
		border-right: solid 1px  #EBEEF5;
	}
	.selectbox{
		margin: 0 30px;
	}
</style>